<template>
  <div class="nav_box">
  <el-menu default-active="2" class="el-menu-vertical-demo menu" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-menu-item index="1" @click="toPage('首页')">首页</el-menu-item>
    
    <!-- <router-link to="/articleType"> -->
    <!-- <el-menu-item index="3" @click="toPage('类型管理')">类型管理</el-menu-item> -->
    <!-- </router-link> -->
     <router-link to="/per-manager">
    <el-menu-item v-if="permissions=='1'" index="2" @click="toPage('权限管理')">权限管理</el-menu-item>
    </router-link>
    <router-link to="/user">
    <el-menu-item index="3" v-if="permissions=='1'||permissions=='2'" @click="toPage('用户管理')">用户管理</el-menu-item>
    </router-link>
    <router-link to="/dorm-manager">
    <el-menu-item index="4" v-if="permissions=='1'" @click="toPage('公寓管理')">公寓管理</el-menu-item>
    </router-link>
     <router-link to="/violation">
    <el-menu-item index="5" @click="toPage('违纪管理')">违纪管理</el-menu-item>
    </router-link>
    <router-link to="/data-Summary" v-if="permissions=='1'">
     <el-menu-item index="7" @click="toPage('数据汇总')">数据汇总</el-menu-item>
    </router-link>
    <!-- <router-link to="/article-manager">
     <el-menu-item index="4" @click="toPage('文章管理')">文章管理</el-menu-item>
    </router-link> -->
    <!-- <el-menu-item index="2" @click="toPage('类型管理')">类型管理</el-menu-item> -->
  </el-menu>
  </div>
</template>
<script type="text/javascript">
import {getPermissions} from "@/utils/auth";
export default {
  name: "nav-bar",
  data() {
    return {
      activeIndex: "",
      activeIndex2: "",
      userName: "",
      permissions:""
    };
  },
  mounted() {
    this.getRole()
  },
  methods: {
    getRole(){
      this.permissions=getPermissions()
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toPage(item) {
      if (item === "首页") {
        this.$router.push("/hello");
      } else if (item === "用户管理") {
        this.$router.push('/user')
      } else if (item === "公寓管理") {
        this.$router.push('/dorm-manager')
      }  else if (item === "违纪管理") {
        this.$router.push('/violation')
      }else if (item === "数据汇总") {
        this.$router.push('/data-Summary')
      }else if (item === "权限管理") {
        this.$router.push('/per-manager')
      }/* else if (item === "类型管理") {
        this.$router.push('/articleType')
      } */
    }
  }
};

</script>
<style scoped>
.nav_box {
   background: #f0f2f5;
   height: 10px;
}
.menu {
  width: 160px;
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  background: #f0f2f5;
  margin-top: 10px;

}

</style>
